<template>
  <div id="EEE">
    <div class="Etop">
      <h1
        style="color:rgb(70,70,70);margin-left:15px;margin-top:15px;font-size:31px;font-weight:700;margin-bottom:5px;">
        统计面板</h1>
      <p style="color:gray;margin-top:10px;margin-left:15px;font-size:20px;">♦

        {{ renderTime(this.time) }}</p>

    </div>
    <div class="Emin">
      <div class="item">
        <p class="title">能力创建</p>
        <p class="bigTitle">{{this.ctotal}}</p>
        <p class="smallTitle aaa">▲ {{this.cthrend}}%</p>
      </div>
      <div class="item">
        <p class="title">能力订阅</p>
        <p class="bigTitle">{{this.subtotal}}</p>
        <p class="smallTitle bbb">▲ {{this.subthrend}}% </p>
      </div>
      <div class="item">
        <p class="title">能力调用</p>
        <p class="bigTitle">{{this.useingtotal}}</p>
        <p class="smallTitle ccc">▲ {{this.useingthrend}}% </p>

      </div>

    </div>
    <div id="topE" ref="topE"></div>
  </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts';
import {getindex} from "@/api/statistics/statistics";

export default {
data() {
  return {
    time:'',
    ctotal:'',
    subtotal:'',
    useingtotal:'',
    cthrend:1,
    subthrend:1,
    useingthrend:1,

      }
},
  mounted() {
    var myChart = echarts.init(this.$refs.topE);
    getindex().then(res => {
      this.time = res.data.time;
      this.ctotal = res.data.cteateTotal;
      this.subtotal = res.data.subTotal;
      this.useingtotal = res.data.useingTotal;
      this.cthrend = res.data.createTrend;
      this.subthrend = res.data.subTrend;
      this.useingthrend = res.data.useingTrend;
      let option = {
        grid: {
          top: '20%',    // 距离顶部的距离
          bottom: '10%'  // 距离底部的距离
        },
        title: {
          // text: 'Capability statistics', // 主标题文本
          left: 10,
          top: 15,
          textStyle: { // 主标题样式
            color: 'black',
            fontSize: 24,
            fontWeight: 'normal',

          }
        },
        legend: {},

        tooltip: {},
        xAxis: {
          type: 'category',
          data: ['前七天', '前六天', '前五天', '前四天', '前三天', '前两天', '前一天', '今日'],
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            data: res.data.createList.slice(6,14),
            itemStyle: {
              color: 'rgb(12,204,227)',
            },
          },
          {
            type: 'bar',
            barWidth: '15%',
            data: res.data.subList.slice(6,14),
            itemStyle: {
              color: 'rgb(16,108,233)',
            },
          },
          {
            type: 'bar',
            barWidth: '15%',
            data: res.data.useingList.slice(6,14),
            itemStyle: {
              color: 'rgb(220,220,220)',
            },
          }
        ]

      };
      console.log("vvv"+res.data.useingList.slice(5,13))
      option && myChart.setOption(option);
    });

  },
  methods: {
    renderTime(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
  }

}
</script>

<style scoped lang="scss">
#EEE {
  width: 48%;
  height: 650px;
  margin: 9px;
  margin-left: 17px;
  border-radius: 13px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);

  .Etop {
    height: 90px;
  }

  .Emin {
    width: 100%;
    height: 145px;
    display: flex;

    .item {
      width: 31%;
      margin-left: 14px;
      padding-left: 20px;
      transition: 0.3s ;

      &:hover{
        transform:scale(1.1);
        text-shadow:2px 3px 5px rgba(0, 0, 0, 0.3) ;
      }

      .title {
        font-size: 18px;
        color: gray;
        height: 20px;
        line-height: 20px;
        margin: 0;
        padding: 0;
        margin-top: 10px;
        font-weight: 600;
        margin-bottom: 5px;
      }

      .bigTitle {
        font-size: 30px;
        margin: 0;
        padding: 0;
      }

      .smallTitle {
        font-size: 18px;
        margin: 0;
        padding: 0;
        margin-top: 3px;
      }

      .aaa {
        color: rgb(130, 196, 215);
        text-shadow: 0 1px 2px rgba(144, 227, 216, 0.6);
      }

      .bbb {
        color: rgb(18, 109, 166);
        text-shadow: 0 1px 2px rgba(82, 128, 157, 0.6);
      }

      .ccc {
        color: rgb(112, 117, 113);
        text-shadow: 0 1px 2px rgba(196, 189, 189, 0.6);
      }

    }
  }
}

#topE {
  width: 100%;
  height: 430px;
  background-color: white;
  border-radius: 13px;
  transform: translateY(-50px);
  /* box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); */
}
</style>
